<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<style type="text/css">

	    *{
	    	margin:0;padding: 0;
	    }
	    li
	    {
	    	list-style: none;height:100%;width:260px;float:left;
	    }
        #box
        {
        	width: 1300px;height:500px;margin:50px auto;border:1px solid black;
        }
        #ul
        {
        	height:100%;overflow: hidden;
        }
	</style>
</head>
<body>

	<div id="box">
		<ul id="ul">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

	</div>
	

</body>
</html>
<script type="text/javascript">
	$(function(){
		//给li加背景图片
		var li = $('#ul li');
		for(var i=0;i<li.length;i++)
		{
			li.eq(i).css("backgroundImage","url(images/"+(i+1)+".jpg)");
		}

		//鼠标移入，当前图片宽变为900，其他的100鼠标移出时，所有的恢复原来的宽度260
		li.mouseenter(function(){

			//stop的使用：加在要执行的动画之前，表示停止当前正在执行的动画
			$(this).stop().animate({width:900}).siblings().stop().animate({width:100});
		}).mouseleave(function() {
			li.stop().animate({width:260});
		});
	});


</script>